<template>
  <div class="login-container">
    <div
      class="content"
      v-loading="btnLoading"
    >
      <div class="login-title">{{ loginName }}</div>
      <el-form class="login-form">
        <el-form-item>
          <svg-icon icon-class="user"></svg-icon>
          <el-input
            v-model="loginForm.identity"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <svg-icon icon-class="lock"></svg-icon>
          <el-input
            :type="passwordType"
            v-model="loginForm.password"
            placeholder="请输入密码"
          ></el-input>
          <svg-icon
            icon-class="eye-close"
            v-if="passwordType ==='password'"
            @click="showPassword"
          ></svg-icon>
          <svg-icon
            icon-class="eye"
            v-else
            @click="hidePassword"
          ></svg-icon>
        </el-form-item>
        <div>
          <div
            id="captcha"
            class="validate"
          >
            <p
              id="wait"
              class="show"
              v-show="geetestLoading"
            >正在加载验证码......</p>
          </div>
        </div>
        <el-button
          @click="login"
          type="primary"
          class="login-form-btn"
        >登录</el-button>
      </el-form>
      <br>
    </div>
    <el-footer class="footer">
      <div class="icp-footer">
        <div class="company-span">{{ company }} </div>
        <div class="link">
          <el-link
            class="icp-link"
            href="https://beian.miit.gov.cn/#/Integrated/index"
            target="_blank"
            :underline="false"
          >
            {{ icp }}
          </el-link>
        </div>
      </div>
    </el-footer>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import { loginApi } from '../../../api/user';
import { validateForm } from './service';
import { parseError } from '../../../utils/index';
import { geetestRegisterApi } from '../../../api/geetest';
import * as md5 from 'md5';

export default {
  data() {
    return {
      btnLoading: false,
      loginForm: {
        identity: '',
        password: ''
      },
      passwordType: 'password',
      geetestLoading: true,
      captchaObj: null,
      icp: process.env.VUE_APP_ICP,
      company: process.env.VUE_APP_COMPANY,
      loginName: process.env.VUE_APP_LOGIN_NAME
    };
  },
  created() {
    document.addEventListener('keyup', this.enterKey);
  },
  mounted() {
    this.geetestInit();
  },
  methods: {
    login() {
      const validError = validateForm(this.loginForm);
      if (validError) return Message.warning(validError);
      const result = this.captchaObj.getValidate();
      if (!result) return Message.warning('请先完成验证');
      this.btnLoading = true;
      loginApi(this.loginForm.identity, md5(this.loginForm.password), result.geetest_challenge, result.geetest_validate, result.geetest_seccode)
        .then(res => {
          this.$store.dispatch('setToken', res.token);
          this.$store.dispatch('setExpiresIn', res.expires_in);
          this.$store.dispatch('setExpiresAt', Date.now() + res.expires_in);
          this.$store.dispatch('setGuardList', res.guard_list);
          this.$store.dispatch('setUserData', { username: this.loginForm.identity, displayName: res.display_name });
          this.$store.dispatch('setJobData', { jobList: res.organization_list, jobId: res.job_id });
          this.$router.replace('/');
        })
        .catch(error => {
          Message.error(parseError(error));
          this.captchaObj.reset();
        })
        .finally(() => (this.btnLoading = false));
    },
    geetestInit() {
      geetestRegisterApi()
        .then(res => {
          initGeetest(
            {
              gt: res.gt,
              challenge: res.challenge,
              new_captcha: res.new_captcha, // 用于宕机时表示是新验证码的宕机
              offline: !res.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
              product: 'float', // 产品形式，包括：float，popup
              width: '100%'
            },
            captchaObj => {
              this.captchaObj = captchaObj;
              captchaObj.appendTo('#captcha');
              captchaObj.onReady(() => (this.geetestLoading = false));
            }
          );
        })
        .catch(error => Message.error(error));
    },
    showPassword() {
      this.passwordType = 'text';
    },
    hidePassword() {
      this.passwordType = 'password';
    },
    enterKey(event) {
      const code = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
      if (code === 13) this.login();
    }
  },
  destroyed() {
    document.removeEventListener('keyup', this.enterKey);
  }
};
</script>

<style lang="scss" scoped>
$bgImage: '../../../assets/images/loginBG.png';

.validate {
  width: 100%;
}
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url($bgImage) no-repeat;
  min-width: 1366px;
  min-height: 100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  color: #5c5c5c;
  position: relative;
  .content {
    // border: 1px solid red;
    max-width: 500px;
    min-height: 350px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 70%;
    top: 28%;
    .login {
      &-title {
        font-size: 33px;
        letter-spacing: 1px;
        // text-align: center;
        padding-bottom: 40px;
      }
      &-form {
        width: 300px;
        .svg-icon {
          font-size: 16px;
          color: #898989;
          padding-left: 10px;
          padding-right: 10px;
        }

        &-btn {
          width: 100%;
          height: 42px;
          font-size: 22px;
          padding-top: 10px;
          letter-spacing: 10px;
          background: #026ab7;
        }
      }
      &-footer {
        font-size: 14px;
        height: 40vh;
      }
    }
  }

  .footer {
    position: absolute;
    bottom: 2%;
    font-size: 14px;
    width: 100%;
    .icp-footer {
      margin-right: auto;
      .company-span {
        font-size: 14px;
      }
      .link {
        display: flex;
        justify-content: center;
        .icp-link {
          font-size: 14px;
        }
      }
    }
  }
}
.el-input__inner {
  height: 40px;
  width: 300px;
}
.login-form-btn {
  margin-top: 50px;
}
#captcha {
  width: 300px;
  height: 50px;
  display: inline-block;
}

.show {
  display: block;
}

.hide {
  display: none;
}

#notice {
  color: red;
}

label {
  vertical-align: top;
  display: inline-block;
  width: 80px;
  text-align: right;
}

#wait {
  text-align: left;
  color: #666;
  margin: 0;
}
/*媒体查询*/
@media (min-width: 1701px) and(max-width:1800px) {
  .login-container {
    .content {
      top: 28%;
      left: 70%;
    }
  }
}
@media (min-width: 1501px) and(max-width:1700px) {
  .login-container {
    .content {
      top: 28%;
      left: 70%;
    }
  }
}
@media (min-width: 1366px) and(max-width:1500px) {
  .login-container {
    .content {
      left: 70%;
    }
  }
}
@media (max-width: 1366px) {
  .login-container {
    min-height: 722px;
    .content {
      top: 30%;
      left: 70%;
    }
  }
}
</style>

<style lang="scss">
$bg: #fff;
$light_gray: #333;
$cursor: #333;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}
.login-container {
  .el-input {
    display: inline-block;
    background: transparent;
    height: 42px;
    width: 75%;
    input {
      background: #fff;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 42px;
      caret-color: $cursor;
      font-size: 16px;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid #cccdcd;
    background: #fff;
    border-radius: 4px;
    color: #454545;
  }
  .footer {
    font-size: 14px;
  }
}
</style>
